<template>
  <div id="about">
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <router-link to="/about" class="mui-navigate-right">{{$t('about')}}</router-link>
      </li>
      <li class="mui-table-view-cell">
        <router-link :to="{path:'/clickdiv/d',query:clickDiv}" class="mui-navigate-right">{{$t('clickSquare')}}
        </router-link>
      </li>
      <li class="mui-table-view-cell">
        <router-link to="/basis" class="mui-navigate-right">{{$t('VueBasis')}}</router-link>
      </li>
      <li class="mui-table-view-cell">
        <router-link to="/plus" class="mui-navigate-right">{{$t('plus')}}</router-link>
      </li>
      <li class="mui-table-view-cell" @click="lang">
        <a href="javaScript:;" class="mui-navigate-right">{{$t('SwitchAppLanguage')}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "about",
    data() {
      return {
        clickDiv: {
          showHead: true
        },
        listLang: [
          {value: '1', text: '中文'},
          {value: '2', text: 'English'},
          {value: '3', text: 'わぶん'},
        ]
      }
    },
    inject: ['reload'],
    methods: {
      lang() {
        const that = this;
        const picker = new mui.PopPicker();
        picker.setData(this.listLang);
        picker.show(function (selectItems) {
          try {
            if (selectItems[0].value == 1) {
              that.$i18n.locale = 'zh';
            } else if (selectItems[0].value == 2) {
              that.$i18n.locale = 'en';
            } else {
              that.$i18n.locale = 'rc';
            }
            that.reload();
          } catch {

          }
        })
      }
    }
  }
</script>

<style lang="scss">
  #about {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .mui-table-view {
      width: 100%;

    }
    a {
      font-weight: bold;
      color: #2c3e50;
      .active-link {
        color: red;
      }

      .exact-active-link {
        color: green;
      }
    }
  }

</style>
